// pages/account/account.js
import * as echarts from '../../../../ec-canvas/echarts';

const app = getApp();

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    backgroundColor: "#ffffff",
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['20%', '40%'],
      data: []
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/account/account',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    gId:0,
    scrollTop:0,
    ec: {
      onInit: initChart
    },
    list:[],
    winWidth:0,
    winHeight:0,
    currentTab:0,
    sum_money:0,
  },
  click:function(e){
    console.log("按了：",e.currentTarget.id)
  },
  onLoad:function(options){
    this.setData({
      gId:options.gId
    })
  },
  onShow:function(){
    var that=this;
    var s = 'http://localhost:8080/superadmin/listgroupcategoryaccountlist?gId='+that.data.gId;
    console.log(s);
    wx.request({
      url: 'http://localhost:8080/superadmin/listgroupcategoryaccountlist?gId='+that.data.gId,
      method:'GET',
      data:{},
      success:function(res){
        var list=res.data.groupaccountList;
        if(list==null){
          var toastText = '获取数据失败' + res.data.errMsg;
          wx.showToast({
            title: toastText,
            icon: '',
            duration: 2000
          });
          console.log("群组账单获取失败");
        }else{
          var len=list.length;
          var dataList=[];
          var sum=0;
          for(var i=0;i<len;i++){
            sum+=list[i].money;
            dataList.push({
              value:list[i].money,
              name:list[i].category,
            })
            list[i].money=list[i].money.toFixed(2);
          }
          that.echartsComponnet = that.selectComponent('#mychart');
          sum=sum.toFixed(2);
          initGraph(that,dataList,that.echartsComponnet,sum);
          that.setData({
            list: list,
            sum_money:sum
          })
          console.log("群组账单获取成功")
        }
      }
    })
  },
  onPageScroll:function(e){
    var a=this;
    // console.log(e.scrollTop)
    a.setData({
      scrollTop:e.scrollTop
    })
  },
  onReady:function() {
    var that=this;
    wx.getSystemInfo({
      success:function(result) {
        that.setData({
          winWidth:result.windowWidth,
          winHeight:result.windowHeight
        });
      },
    });
  },
});
//加载饼状图
function initGraph(that,dataList,echart,total){
  var option = {
    title: {
      text: [
          '{value|￥' + total + '}',
          '{name|总金额}',
      ].join('\n'),
      rich: {
          value: {
              color: '#303133',
              fontSize: 20,
              fontWeight: 'bold',
              lineHeight: 20,
          },
          name: {
              color: '#909399',
              lineHeight: 10
          },
      },
      top: 'center',
      left: '153',
      textAlign: 'center',
      textStyle: {
          rich: {
              value: {
                  color: '#303133',
                  fontSize: 14,
                  fontWeight: 'bold',
                  lineHeight: 40,
              },
              name: {
                  color: '#909399',
                  lineHeight: 5
              },
          },
      },
  },
    backgroundColor: "#ffffff",
    series: [{
      data:dataList,
      label: {
        normal: {
          fontSize: 12,
          show: true,
          formatter: '{b}\n({d}%)'
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['25%', '40%'],
    }]
  };
  // that.echartsComponnet = that.selectComponent('#mychart2');
  echart.init((canvas, width, height) => {
    // 初始化图表
    const Chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    Chart.setOption(option);
  })
}